<template>
	<div class="LongBill shortorder list4list list4">
		<div class="LongBill-title">
			<div class="title-box">
				<span class="short-title " :class="{titleactive: isshortactive}" @click="shortlong($event)">未支付</span>
				<span class="long-title" :class="{titleactive: islongactive}" @click="shortlong($event)">已支付</span>
			</div>
		</div>

		<div v-if="nopay" class="box">
			<div class="check-box">
				<yd-accordion accordion>
					<yd-accordion-item v-if="OrderLongBilldata.cashPledge>0" title="押金">
						<div class="check" slot="icon">
							<span class="jecheckiconactive"></span>
							<!--<v-checkicon class="yicheck checkiconactive" style="pointer-events:none;"></v-checkicon>-->
						</div>
						<div class="info-box">
							<p class="accbill-item">
								<span class="accbill-left">押金</span>
								<span class="accbill-right">￥{{OrderLongBilldata.cashPledge}}</span>
							</p>
						</div>
					</yd-accordion-item>
					<yd-accordion-item v-for="item,key in OrderLongBilldata.bills" :key="key" :title="item.startTime+'至'+item.endTime+'期账单'">
						<div class="check" slot="icon">
							<v-checkicon name="checkitem" @click.native="changeCheck($event,key,item.jine)"></v-checkicon>
						</div>
						<div class="info-box">
							<p class="accbill-item">
								<span class="accbill-left">租金</span>
								<span class="accbill-right">￥{{OrderLongBilldata.price}}</span>
							</p>
							<p class="accbill-item"><span class="accbill-left">服务费</span><span class="accbill-right">￥{{OrderLongBilldata.service_price}}</span></p>
							<p class="accbill-item"><span class="accbill-left">租期</span><span class="accbill-right">{{item.Month}}</span></p>
							<p class="accbill-item"><span class="accbill-left">金额</span><span class="accbill-right">￥{{item.jine}}</span></p>
						</div>
					</yd-accordion-item>
				</yd-accordion>
			</div>
			<div class="all-box">
				<div class="checkAll">

					<v-checkicon @click.native="changeStart"></v-checkicon>
					<label style="margin: 0 .2rem;" for="all">全选</label>

					<div class="longgou">
						已选择{{allNum}}个账单<span class="sumey">￥{{sumey.toFixed(1)}}</span>
					</div>
				</div>
				<button class="longpay" :class="{longpayactive:islongpayactive}" @click="gopay">支付</button>
			</div>
		</div>
		<div v-if="pay" class="box">
			<div class="check-box">
				<yd-accordion accordion>
					<yd-accordion-item v-if="OrderLongBilldata.cashPledge>0" title="押金">
						<div class="check" slot="icon">
							<!--<v-checkicon class="yicheck checkiconactive" style="pointer-events:none;"></v-checkicon>-->
						</div>
						<div class="info-box">
							<p class="accbill-item">
								<span class="accbill-left">押金</span>
								<span class="accbill-right">￥{{OrderLongBilldata.cashPledge}}</span>
							</p>
						</div>
					</yd-accordion-item>
					<yd-accordion-item v-for="item,key in OrderLongBilldata.bills" :key="key" :title="item.startTime+'至'+item.endTime+'期账单'">
						<div class="check" slot="icon">
							<!--<v-checkicon name="checkitem" @click.native="changeCheck($event,key,item.jine)"></v-checkicon>-->
						</div>
						<div class="info-box">
							<p class="accbill-item">
								<span class="accbill-left">租金</span>
								<span class="accbill-right">￥{{OrderLongBilldata.price}}</span>
							</p>
							<p class="accbill-item"><span class="accbill-left">服务费</span><span class="accbill-right">￥{{OrderLongBilldata.service_price}}</span></p>
							<p class="accbill-item"><span class="accbill-left">租期</span><span class="accbill-right">{{item.Month}}</span></p>
							<p class="accbill-item"><span class="accbill-left">金额</span><span class="accbill-right">￥{{item.jine}}</span></p>
						</div>
					</yd-accordion-item>
				</yd-accordion>
			</div>
		</div>

	</div>

</template>

<script>
	import checkicon from "./checkicon";
	import { mapGetters, mapActions } from 'vuex';
	import api from '../fetch/api';
	import eventBus from "../assets/libs/eventBus.js";
	export default {
		name: "LongBill",
		data() {
			return {
				islongpayactive: false,
				nopay: true,
				pay: false,
				isyaj: true,
				yajinnum: 0.1,
				checkAll: false,
				checkModel: [],
				allNum: 0,
				sumey: 0,
				status: 0,
				orderId: this.$route.query.orderId,
				mySessionUserinfo: JSON.parse(sessionStorage.getItem("userinfo")), //登录验证

				orderNolist: [],
				OrderLongBilldata: [],
				ischeckiconactive: true,
				shortorder: true,
				longorder: false,
				isshortactive: true,
				islongactive: false,
				page: 1,
				pageSize: '',
				houseType: 2,
			}
		},
		created() {
			this.OrderLongBillApi();
		},
		mounted() {},
		computed: {
			...mapGetters([
				'source',
			])
		},
		methods: {
			...mapActions({
				getIsCollect: 'getIsCollect'
			}),
			shortlong(event) {
				var that = this;
				if(event.currentTarget.innerText == "未支付") {

					that.isshortactive = true;
					that.islongactive = false;
					that.status = 0;
					that.OrderLongBillApi();
					that.nopay = true;
					that.pay = false;
				}
				if(event.currentTarget.innerText == "已支付") {
					that.isshortactive = false;
					that.islongactive = true;
					that.status = 1;
					that.OrderLongBillApi();
					that.nopay = false;
					that.pay = true;
				}

			},
			OrderLongBillApi() {
				let ajaxSign = {
					source: this.source, // string 是
					userId: this.mySessionUserinfo.id.toString(), // string 是
					token: this.mySessionUserinfo.token, // string 是
					orderId: this.orderId.toString(), // string 是
					status: this.status.toString(), // string 是 0 = （未支付） 1 = （已支付）
				}
				let ajaxData = api.getAES(ajaxSign);
				api.GetOrderLongBill(ajaxData)
					.then(res => {
						console.log(res)
						this.OrderLongBilldata = res.result;
						for(var i = 0; i < this.OrderLongBilldata.bills.length; i++) {
							if(this.OrderLongBilldata.bills[i].payType == 1) {
								this.OrderLongBilldata.bills[i]["Month"] = 1;
							}
							if(this.OrderLongBilldata.bills[i].payType == 2) {
								this.OrderLongBilldata.bills[i]["Month"] = 3;
							}
							if(this.OrderLongBilldata.bills[i].payType == 3) {
								this.OrderLongBilldata.bills[i]["Month"] = 12;
							}
							if(this.OrderLongBilldata.bills[i].payType == 4) {
								this.OrderLongBilldata.bills[i]["Month"] = 6;
							}
							let jine = ((this.OrderLongBilldata.price + this.OrderLongBilldata.service_price) * this.OrderLongBilldata.bills[i].Month).toFixed(2);
							this.OrderLongBilldata.bills[i]["jine"] = parseFloat(jine)
						}
					})
			},
			changeStart(e) {
				this.allNum = 0;
				this.sumey = 0;
				if(e.target.className == "longcheck checkiconactive") {
					this.islongpayactive = true;
					for(var i = 0; i < $(".longcheck").length; i++) {
						$(".longcheck").eq(i).removeClass("checkicon").addClass("checkiconactive")
					}
					this.allNum = $(".longcheck").length - 1;
					this.orderNolist = [];
					for(var i = 0; i < this.OrderLongBilldata.bills.length; i++) {
						this.sumey += this.OrderLongBilldata.bills[i].jine;
						this.orderNolist = this.orderNolist.concat(this.OrderLongBilldata.bills[i].orderNo);
					}
					this.sumey += this.OrderLongBilldata.cashPledge
				}
				if(e.target.className == "longcheck checkicon") {
					this.islongpayactive = false;
					for(var i = 0; i < $(".longcheck").length; i++) {
						$(".longcheck").eq(i).removeClass("checkiconactive").addClass("checkicon")
					}
					this.allNum = 0;
					this.sumey = 0;
				}
			},
			changeCheck(e, index, jine) {
				if(e.target.className == "longcheck checkiconactive") {

					this.islongpayactive = true;
				} else {

					this.islongpayactive = false;
				}
				this.sumey = 0;
				let sum = 0;
				this.allNum = $(".checkiconactive").length;
				let datalength = 0;
				datalength = document.getElementsByName("checkitem").length;
				this.orderNolist = [];
				for(var i = 0; i < datalength; i++) {
					if(document.getElementsByName("checkitem")[i].className == "longcheck checkiconactive") {
						sum += this.sumey + this.OrderLongBilldata.bills[i].jine;
						this.orderNolist = this.orderNolist.concat(this.OrderLongBilldata.bills[i].billId);
					}
				}
				this.sumey = sum + this.OrderLongBilldata.cashPledge;
			},
			gopay() {
				console.log(this.islongpayactive)
				if(this.islongpayactive == false) {
					return
				}
				
				let ajaxSign = {
					source: this.source, // string 是
					token: this.mySessionUserinfo.token, // string 是
					userId: this.mySessionUserinfo.id.toString(), // string 是
					orderId: this.orderId.toString(), // string 是 订单id
					payPrices: this.sumey.toString(), // string 是 支付价格， 账单总价 + 押金
					billNum: this.allNum.toString(), // string 是 提交的账单数量
					billIdList: this.orderNolist.join(","), // string 是 账单id用逗号隔开的字符串
				}
				let ajaxData = api.getAES(ajaxSign);
				console.log(ajaxData)
				api.GetLongOrderPay(ajaxData)
					.then(res => {
						console.log(res)
				this.$dialog.toast({
					mes: res.msg,
					timeout: 1000
				});
						if(res.sta == 200) {
							this.$router.push({
								path: "/AliWapPay",
								query: {
									orderId: res.result.orderId,
									orderNo: res.result.orderNo,
								}
							})
						}
					})
			}
		},
		components: {
			'v-checkicon': checkicon
		}
	}
</script>

<style>
	.LongBill {
		width: 100%;
		color: #282828;
		font-size: .35rem;
		padding-bottom: 1.2rem;
		box-sizing: border-box;
	}
	
	.LongBill .LongBill-title {
		display: flex;
		justify-content: center;
		align-items: center;
		background: #fff;
	}
	
	.LongBill .title-box {
		width: 100%;
		display: flex;
		justify-content: center;
		overflow: hidden;
	}
	
	.LongBill .LongBill-title span {
		display: block;
		width: 50%;
		text-align: center;
		height: .69rem;
		line-height: .69rem;
		background: #fff;
		padding: 0 .37rem;
		box-sizing: border-box;
	}
	
	.LongBill .LongBill-title .titleactive {
		color: #e25051;
		border-bottom: .01rem solid #e25051;
	}
	
	.LongBill .LongBill-content {
		width: 100%;
	}
	/*日租列表*/
	/*长租导航*/
	
	.LongBill .long-navul {
		width: 100%;
		display: flex;
	}
	
	.LongBill .long-navitem {
		width: 33.3333%;
		text-align: center;
		line-height: .69rem;
		background: #fff;
	}
	/*房屋列表*/
	
	.LongBill .shortorder .yd-list-loading>div {
		display: block !important;
	}
	/*折叠图标*/
	
	.LongBill .yd-accordion-head-arrow:after {
		width: .23rem;
		height: .23rem;
		border: 1px solid #A4A4A4;
		transform: rotate(45deg);
		border-left: 0;
		border-top: 0;
	}
	
	.LongBill .yd-accordion-head-arrow.yd-accordion-rotated:after {
		border: 1px solid #A4A4A4;
		border-right: 0;
		border-bottom: 0;
	}
	
	.LongBill .yd-accordion-title {
		font-size: .31rem;
	}
	
	.LongBill .accbill-item {
		display: flex;
		justify-content: space-between;
		padding: .1rem .24rem;
		box-sizing: border-box;
		font-size: .28rem;
	}
	
	.accbill-left {
		color: #747474;
	}
	
	.accbill-right {
		color: #E25051;
	}
	
	.longgou {
		font-size: .24rem;
		color: #A4A4A4;
	}
	
	.checkAll {
		display: flex;
		align-items: center;
	}
	
	.longpay {
		border: none;
		color: #A4A4A4;
		background: #EEECEC;
		padding: .1rem .2rem;
		box-sizing: border-box;
		border-radius: .1rem;
	}
	
	.longpayactive {
		background: #E25051;
		color: #fff;
	}
	
	.sumey {
		color: #E25051;
	}
	
	.all-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		position: fixed;
		bottom: 0px;
		background: white;
		padding: .3rem 0.24rem;
	}
	
	.check {
		margin-right: 0.2rem;
	}
	
	.jecheckiconactive {
		display: inline-block;
		width: .23rem;
		height: .23rem;
		border: 1px solid #E25051;
		background: url(../assets/img/Tick.png) no-repeat center;
		background-size: .21rem;
	}
</style>